﻿
@{
    ViewBag.Title = "Part6_4";
    Layout = "~/Views/Shared/_LayoutPart6.cshtml";
}

<div class="con left">
    <!--数据总概-->
    <div class="con_div">
        <div class="con_div_text left">
            <div class="con_div_text01 left">
                <div class="left text01_div">
                    <p>设备总数量</p>
                    <p class="sky">594</p>
                </div>
            </div>
            <div class="con_div_text01 right">
                <div class="left text01_div">
                    <p>危险点设备数量</p>
                    <p>106</p>
                </div>
            </div>
        </div>
        <div class="con_div_text left">
            <div class="con_div_text01 left">
                <div class="left text01_div">
                    <p>设备过期未检查</p>
                    <p class="org">9</p>
                </div>
            </div>
            <div class="con_div_text01 right">
                <div class="left text01_div">
                    <p>人员资质过期数</p>
                    <p class="org">115</p>
                </div>
            </div>
        </div>
        <div class="con_div_text left">

            <div class="con_div_text01 left">
                <div class="left text01_div">
                    <p>作业资格证类型总数</p>
                    <p class="sky">29</p>
                </div>
            </div>
            <div class="con_div_text01 right">
                <div class="left text01_div">
                    <p>人员持证数</p>
                    <p class="sky">901</p>
                </div>
            </div>
        </div>
    </div>
    <!--统计分析图-->
    <div class="div_any">
        <div class="left div_any01">
            <div class="div_any_child">
                <div class="div_any_title">设备种类及数量</div>
                <p id="deviceType" class="p_chart"></p>
            </div>
            <div class="div_any_child">
                <div class="div_any_title">设备检测有效期合格率</div>
                <p id="passPercent" class="p_chart"></p>
            </div>
        </div>
        <div class="div_any02 left ">
            <div class="left div_table_box div_height" style="width: 48%;float:left;">
                <div class="div_any_child" style="height: 100%;">
                    <div class="div_any_title">过期未检查设备</div>
                    <div class="table_p">
                        <table>
                            <thead>
                                <tr>
                                    <th>序号</th>
                                    <th>设备</th>
                                    <th>检查日期</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr><td>1</td><td>2011#锅炉房-燃气蒸汽锅炉</td><td>2020-12-17</td></tr>
                                <tr><td>2</td><td>2001#锅炉房-燃气热水锅炉</td><td>2020-12-17</td></tr>
                                <tr><td>3</td><td>2011#锅炉房-燃气蒸汽锅炉</td><td>2020-12-17</td></tr>
                                <tr><td>4</td><td>2014#锅炉房-燃气蒸汽锅炉</td><td>2020-12-17</td></tr>
                                <tr><td>5</td><td>2014#锅炉房-燃气蒸汽锅炉</td><td>2020-12-17</td></tr>
                                <tr><td>6</td><td>2014#锅炉房-燃气蒸汽锅炉</td><td>2020-12-17</td></tr>
                                <tr><td>7</td><td>2014#锅炉房-燃气热水锅炉</td><td>2020-12-17</td></tr>
                                <tr><td>8</td><td>2014#锅炉房-燃气热水锅炉</td><td>2020-12-17</td></tr>
                                <tr><td>9</td><td>2001#锅炉房-燃气热水锅炉</td><td>2020-12-17</td></tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
            <div class="left div_table_box div_height" style="width: 48%;float:left;">
                <div class="div_any_child" style="height: 100%;">
                    <div class="div_any_title">过期未检查人员</div>
                    <div class="table_p">
                        <table>
                            <thead>
                                <tr>
                                    <th>序号</th>
                                    <th>姓名</th>
                                    <th>检查时间</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr><td>1</td><td>潘镇江</td><td>2020-09-09</td></tr>
                                <tr><td>2</td><td>曾静</td><td>2020-09-09</td></tr>
                                <tr><td>3</td><td>赵继荣</td><td>2020-09-09</td></tr>
                                <tr><td>4</td><td>谷焱</td><td>2020-09-09</td></tr>
                                <tr><td>5</td><td>张学仁</td><td>2020-09-09</td></tr>
                                <tr><td>6</td><td>殷佩蓓</td><td>2020-09-09</td></tr>
                                <tr><td>7</td><td>彭飞</td><td>2020-09-09</td></tr>
                                <tr><td>8</td><td>沈伟</td><td>2020-09-09</td></tr>
                                <tr><td>9</td><td>林隽</td><td>2020-09-09</td></tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
        <div class="right div_any01">
            <div class="div_any_child">
                <div class="div_any_title">特种作业种类及数量</div>
                <p id="operateType" class="p_chart"></p>
            </div>
            <div class="div_any_child">
                <div class="div_any_title"></div>
                <p id="lineChart2" class="p_chart"></p>
            </div>
        </div>
    </div>


</div>

<script>
    $("#part6_4").attr("class", "nav_active");
    LoadData();
    function LoadData() {
        setTimeout(function () {
            GetDeviceType();
            GetPassPercent();
            GetOperateType();
        }, 2000);
        setInterval(function () {

        }, 30000);
    }
    function GetDeviceType() {
        var option = {
            title: {
                text: '',
                subtext: '',
                left: 'center'
            },
            tooltip: {
                trigger: 'item',
                formatter: '{a} <br/>{b} : {c} ({d}%)'
            },
            legend: {
                orient: 'vertical',
                left: 'left',
                data: ['电梯', '锅炉', '起重机械', '压力管道', '压力容器'],
                textStyle: {
                    color: 'white'
                }
            },
            series: [
                {
                    name: '',
                    type: 'pie',
                    radius: '55%',
                    center: ['50%', '60%'],
                    data: [
                        { value: 34, name: '电梯' },
                        { value: 13, name: '锅炉' },
                        { value: 98, name: '起重机械' },
                        { value: 20, name: '压力管道' },
                        { value: 429, name: '压力容器' }
                    ],
                    itemStyle: {
                        normal: {
                            // 随机显示
                            //color:function(d){return "#"+Math.floor(Math.random()*(256*256*256-1)).toString(16);}

                            // 定制显示（按顺序）
                            color: function (params) {
                                var colorList = ['#E98F6F', '#61A0A8', '#2F4554', 'skyblue', '#749F83', '#E98F6F'];
                                return colorList[params.dataIndex]
                            }
                        },
                    },
                    emphasis: {
                        itemStyle: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        };
        var myChart1 = echarts.init(document.getElementById('deviceType'));
        myChart1.setOption(option);
    }

    function GetPassPercent() {
        var option = {
            title: {
                text: '',
                subtext: '',
                left: 'center'
            },
            tooltip: {
                trigger: 'item',
                formatter: '{a} <br/>{b} : {c} ({d}%)'
            },
            legend: {
                orient: 'vertical',
                left: 'left',
                data: ['合格', '不合格'],
                textStyle: {
                    color: 'white'
                }
            },
            series: [
                {
                    name: '',
                    type: 'pie',
                    radius: '55%',
                    center: ['50%', '60%'],
                    data: [
                        { value: 52, name: '合格' },
                        { value: 4, name: '不合格' },
                    ],
                    itemStyle: {
                        normal: {
                            // 随机显示
                            //color:function(d){return "#"+Math.floor(Math.random()*(256*256*256-1)).toString(16);}

                            // 定制显示（按顺序）
                            color: function (params) {
                                var colorList = ['#61A0A8', 'orange', '#2F4554', 'skyblue', '#749F83', '#E98F6F'];
                                return colorList[params.dataIndex]
                            }
                        },
                    },
                    emphasis: {
                        itemStyle: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        };
        var myChart1 = echarts.init(document.getElementById('passPercent'));
        myChart1.setOption(option);
    }

    function GetOperateType() {
        var option = {
            title: {
                text: '',
                subtext: '',
                left: 'center'
            },
            tooltip: {
                trigger: 'item',
                formatter: '{a} <br/>{b} : {c} ({d}%)'
            },
            legend: {
                orient: 'vertical',
                left: 'right',
                data: ['场内电瓶搬运车', '有毒有害有限空间作业', '低压电工', '起重机械指挥', '危险化学品其他从业人员'],
                textStyle: {
                    color: 'white'
                }
            },
            series: [
                {
                    name: '',
                    type: 'pie',
                    radius: '55%',
                    center: ['50%', '60%'],
                    data: [
                        { value: 225, name: '场内电瓶搬运车' },
                        { value: 209, name: '有毒有害有限空间作业' },
                        { value: 76, name: '低压电工' },
                        { value: 69, name: 'Q3起重机械指挥' },
                        { value: 49, name: '危险化学品其他从业人员' }
                    ],
                    itemStyle: {
                        normal: {
                            // 随机显示
                            //color:function(d){return "#"+Math.floor(Math.random()*(256*256*256-1)).toString(16);}

                            // 定制显示（按顺序）
                            color: function (params) {
                                var colorList = ['#E98F6F', '#61A0A8', '#2F4554', 'skyblue', '#749F83', '#E98F6F'];
                                return colorList[params.dataIndex]
                            }
                        },
                    },
                    emphasis: {
                        itemStyle: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        };
        var myChart1 = echarts.init(document.getElementById('operateType'));
        myChart1.setOption(option);
    }
</script>